<template>
	<dt-main-body v-model="labelPosition">
		<div class="location">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item>
					<i class="iconfont icon-home"></i>
					管理中心
				</el-breadcrumb-item>
				<el-breadcrumb-item>商城管理</el-breadcrumb-item>
				<el-breadcrumb-item>编辑订单</el-breadcrumb-item>
			</el-breadcrumb>
		</div>

		<div class="content-box">
			<el-tabs v-model="activeName" type="card">
				<el-tab-pane label="基本信息" name="info">
					<div class="tab-content">
						<el-form ref="editForm1" :model="model" :rules="rules" :label-position="labelPosition" label-width="120px">
							<el-form-item prop="orderType" label="订单类型">
								<el-radio-group v-model="model.orderType" disabled>
									<el-radio-button label="0">普通订单</el-radio-button>
									<el-radio-button label="1">抢购订单</el-radio-button>
									<el-radio-button label="2">预售订单</el-radio-button>
									<el-radio-button label="3">换购订单</el-radio-button>
								</el-radio-group>
							</el-form-item>
							<el-form-item label="商品列表">
								<el-table :data="model.orderGoods" border class="table-form">
									<el-table-column label="商品名称" min-width="220">
										<template slot-scope="scope">
											<el-image class="pic" fit="contain" :src="$api.loadFile(scope.row.imgUrl)">
												<div slot="error" class="image-slot">
													<i class="el-icon-picture-outline"></i>
												</div>
											</el-image>
											<h4>{{scope.row.goodsTitle}}</h4>
											<span class="date">
												{{scope.row.goodsNo}}
											</span>
										</template>
									</el-table-column>
									<el-table-column label="规格" min-width="120">
										<template slot-scope="scope">
											<span class="nowrap">{{scope.row.skuText}}</span>
										</template>
									</el-table-column>
									<el-table-column prop="realPrice" label="现价格" width="80"></el-table-column>
									<el-table-column prop="goodsPrice" label="原售价" width="80"></el-table-column>
									<el-table-column prop="quantity" label="数量" width="80"></el-table-column>
								</el-table>
							</el-form-item>
							<el-form-item prop="remark" label="订单备注">
								<el-input type="textarea" :rows="3" v-model="model.remark" maxlength="512" show-word-limit placeholder="可空，管理员对订单的备注"></el-input>
							</el-form-item>
							<el-form-item label="下单时间" v-if="model.id>0">
								{{model.addTime}}
							</el-form-item>
							<el-form-item label="付款时间" v-if="model.id>0&&model.paymentTime">
								{{model.paymentTime}}
							</el-form-item>
							<el-form-item label="发货时间" v-if="model.id>0&&model.deliveryTime">
								{{model.deliveryTime}}
							</el-form-item>
							<el-form-item label="完成时间" v-if="model.id>0&&model.completeTime">
								{{model.completeTime}}
							</el-form-item>
						</el-form>
					</div>
				</el-tab-pane>
				<el-tab-pane label="收货信息" name="accept">
					<div class="tab-content">
						<el-form ref="editForm2" :model="model" :rules="rules" :label-position="labelPosition" :disabled="model.deliveryStatus>0" label-width="120px">
							<el-form-item prop="acceptName" label="收件人">
								<el-input v-model="model.acceptName" placeholder="必填，收货人的姓名"></el-input>
							</el-form-item>
							<el-form-item prop="mobile" label="手机号码">
								<el-input v-model="model.mobile" placeholder="必填，收货人的手机号码"></el-input>
							</el-form-item>
							<el-form-item prop="telPhone" label="固定电话">
								<el-input v-model="model.telPhone" placeholder="可空，收货人固定电话号码"></el-input>
							</el-form-item>
							<el-form-item label="收货地区">
								<el-row class="select-list">
									<el-col :xs="24" :sm="8">
										<el-form-item prop="province">
											<el-select v-model="model.province" @change="handleProvinceChange" placeholder="请选择省份">
												<el-option v-for="item in provinceList"
													:key="item.id"
													:label="item.title"
													:value="item.title">
												</el-option>
											</el-select>
										</el-form-item>
									</el-col>
									<el-col :xs="24" :sm="8">
										<el-form-item prop="city">
											<el-select v-model="model.city" @change="handleCityChange" placeholder="请选择城市">
												<el-option v-for="item in cityList"
													:key="item.id"
													:label="item.title"
													:value="item.title">
												</el-option>
											</el-select>
										</el-form-item>
									</el-col>
									<el-col :xs="24" :sm="8">
										<el-form-item prop="area">
											<el-select v-model="model.area" placeholder="请选择地区">
												<el-option v-for="item in areaList"
													:key="item.id"
													:label="item.title"
													:value="item.title">
												</el-option>
											</el-select>
										</el-form-item>
									</el-col>
								</el-row>
							</el-form-item>
							<el-form-item prop="address" label="详细地区">
								<el-input v-model="model.address" placeholder="必填，除省市区外的详细地区"></el-input>
							</el-form-item>
							<el-form-item prop="postscript" label="用户附言">
								<el-input type="textarea" :rows="3" v-model="model.postscript" maxlength="512" show-word-limit placeholder="可空，会员对订单的要求备注"></el-input>
							</el-form-item>
							<el-form-item prop="acceptTime" label="送货时间">
								<el-radio-group v-model="model.acceptTime">
									<el-radio label="任意">任意</el-radio>
									<el-radio label="周一至周五">周一至周五</el-radio>
									<el-radio label="周末">周末</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-form>
					</div>
				</el-tab-pane>
			</el-tabs>
		</div>

		<div class="footer-box">
			<div class="footer-btn">
				<el-button type="primary" :loading="loading" @click="submitForm">确认保存</el-button>
				<el-button plain @click="$common.back()">返回上一页</el-button>
			</div>
		</div>
	</dt-main-body>
</template>

<script>
	export default {
		props: {
			id: 0
		},
		data() {
			return {
				activeName: 'info', //当前选项卡
				labelPosition: 'right', //表单对齐方式
				loading: false,
				provinceList: [],//省份列表
				cityList: [],//城市列表
				areaList: [],//地区列表
				model: {
					id: 0,
					orderNo: null,
					userName: null,
					payableFreight: 0,
					realFreight: null,
					payableAmount: 0,
					realAmount: 0,
					couponAmount: 0,
					promotionAmount: 0,
					discountAmount: 0,
					frontAmount: 0,
					orderAmount: 0,
					paymentStatus: 0,
					deliveryStatus: 0,
					status: 1,
					exp: null,
					point: null,
					retainStartTime: null,
					retainEndTime: null,
					paymentTime: null,
					deliveryTime: null,
					addTime: null,
					completeTime: null,
					orderGoods: [],
					orderLog: [],
					collectionRelations: [],
					payment: {},
					delivery: {},
					merchantId: null,
					orderType: null,
					activeId: 0,
					userId: null,
					deliveryId: null,
					acceptName: null,
					telPhone: null,
					mobile: null,
					province: null,
					city: null,
					area: null,
					address: null,
					isInsure: 0,
					insurePrice: 0,
					postscript: null,
					remark: null,
					acceptTime: null,
					useCouponId: null,
				},
				rules: {
					acceptName: [
						{ required: true, message: '请输入收货人姓名', trigger: 'blur' }
					],
					mobile: [
						{ required: true, message: '请输入收货人手机号码', trigger: 'blur' },
						{ pattern: /^1[0-9]{10}$/, message: '手机号码格式不正确', trigger: 'blur' }
					],
					province: [
						{ required: true, message: '请选择配送省份', trigger: 'change' }
					],
					city: [
						{ required: true, message: '请选择配送城区', trigger: 'change' }
					],
					area: [
						{ required: true, message: '请选择配送地区', trigger: 'change' }
					],
					address: [
						{ required: true, message: '请输入除省市区外收货地址', trigger: 'blur' }
					],
					acceptTime: [
						{ required: true, message: '请选择收货时间', trigger: 'change' }
					],
				}
			}
		},
		methods: {
			//初始化数据
			initData() {
				let _this = this; //当前页面
				if (_this.id) {
					_this.$api.request({
						url: '/admin/order/' + _this.id,
						loading: true,
						success(res) {
							console.log(res.data)
							//赋值给model
							Object.keys(_this.model).forEach(key => { _this.model[key] = res.data[key] });
							_this.handleProvinceChange(_this.model.province, _this.model.city);
							_this.handleCityChange(_this.model.city, _this.model.area);
							let addressArr = _this.model.address.split(",");
							_this.model.address = addressArr[addressArr.length - 1];
						}
					});
				}
				//加载省份列表
				_this.$api.request({
					url: '/admin/area/view/0',
					success(res) {
						_this.provinceList = res.data;
					}
				});
			},
			//提交表单
			submitForm() {
				let _this = this; //当前页面
				//多个表单验证
				const f1 = new Promise((resolve, reject) => {
					_this.$refs['editForm1'].validate((valid) => {
						if (valid) resolve()
					});
				});
				const f2 = new Promise((resolve, reject) => {
					_this.$refs['editForm2'].validate((valid) => {
						if (valid) resolve()
					});
				});
				Promise.all([f1, f2]).then(() => {
					//检查有订单商品
					if (_this.model.orderGoods.length == 0) {
						_this.$message({ type: 'warning', message: '错误提示：请选择商品后重试' });
						return false;
					}
					if (_this.model.id > 0) {
						_this.$api.request({
							method: 'put',
							url: '/admin/order/' + _this.model.id,
							data: _this.model,
							successMsg: '修改订单已成功',
							beforeSend() {
								_this.loading = true
							},
							success(res) {
								_this.$common.linkUrl('/order/list');
							},
							complete() {
								_this.loading = false
							}
						});
					}
				})
			},
			//省份回调事件
			handleProvinceChange(val, city) {
				let _this = this;
				//加载城市列表
				_this.$api.request({
					url: '/admin/area/view/0?keyword=' + encodeURI(val),
					success(res) {
						_this.cityList = res.data;
					},
					error(err) {
						_this.cityList = [];
					},
					complete() {
						if (!city) {
							_this.model.city = null;
							_this.model.area = null;
							_this.areaList = [];
						}
					}
				});
			},
			//城市回调事件
			handleCityChange(val, area) {
				let _this = this;
				//加载城市列表
				_this.$api.request({
					url: '/admin/area/view/0?keyword=' + encodeURI(val),
					success(res) {
						_this.areaList = res.data;
					},
					error(err) {
						_this.areaList = []
					},
					complete() {
						if (!area) {
							_this.model.area = null;
						}
					}
				});
			},
		},
		created() {
			this.initData();
		}
	}
</script>